<template>
	<view class="page">
		<view class="">
			<uni-loding :loading='loading'></uni-loding>
			<view class="button" @click="oneImage('avatar')">
				<image :src="user.avatar" mode='aspectFill' v-if="user.avatar"></image>
				<image src="@/static/images/head.png" mode='aspectFill' v-else></image>
			</view>
			<!-- </button> -->


			<view class="input_name" style="margin-top:50rpx;border-top: 1rpx solid #EEEEEE;">
				<text>昵称</text>
				<input type="nickname" placeholder="请输入名称" v-model="userName" class='right-text' />
			</view>
		</view>
		<view class="btn-box" @click="sub">
			<view class="btn">修改信息</view>
		</view>
		<!-- <view class="submit" @click="sub">
			<text>修改信息</text>
		</view> -->
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/utils/Oss.js'
	export default {
		data() {
			return {
				user: "",
				userName: "",
				submit: true,
				loading: true,
				phon: false
			}
		},
		onLoad() {
			this.getPerson()
		},
		methods: {
			oneImage(name) {
				CommonUpload().then(res => {
					this.user[name] = res
				})
			},
			// 提交
			sub() {
				if (this.submit) {
					this.submit = false
					let data = {
						username: this.userName,
						avatar: this.user.avatar
					}
					this.$func.request('/user/update_info', data, 'POST').then(res => {
						uni.navigateBack({
							delta: 1
						})
					})

				}
			},
			// 个人信息
			getPerson() {
				this.$func.request('/user/info').then(res => {
					this.user = res.data.data
					this.userName = res.data.data.username
					this.loading = false
				})
			},
		}
	}
</script>

<style scoped>
	.page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	text {
		font-family: 'webfont' !important;
		white-space: nowrap;
		/* 强制性的在一行显示所有的文本，直到文本结束或者遭遇br标签对象才换行*/
		overflow: hidden;
		/* 溢出的文字隐藏起来*/
		text-overflow: ellipsis;
		max-width: 400rpx;
	}

	.right-text {
		text-align: right;
		margin-right: 30rpx;
	}

	.button {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.button image {
		width: 150rpx;
		height: 150rpx;
	}

	.uni-icons {
		font-family: uniicons !important;
	}

	.input_name {
		display: flex;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 0;
		justify-content: space-between;
	}

	.input_name text {
		color: #3333333;
		font-size: 28rpx;
		padding-left: 50rpx;
		width: 100rpx;
	}

	.input_name input {
		margin-left: 120rpx;
		width: 400rpx;
	}

	.submit {
		width: 688rpx;
		height: 100rpx;
		background: #155DFF;
		border-radius: 214rpx;
		text-align: center;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.active {
		background: #FFBF08;
	}

	.submit text {
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
	}

	.active text {
		color: #FFFFFF;
	}

	::v-deep button {
		padding: 0;
		background-color: #fff;
		line-height: normal;
	}

	::v-deep button::after {
		background-color: #fff;
		border: none;
		padding: 0;
		height: auto;
	}

	.mation_images {
		flex: ;
	}

	.btn-box {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, .3) 0rpx 0rpx 10rpx 0rpx;
		position: relative;
	}

	.btn {
		color: #fff;
		font-size: 32rpx;
		background-color: #155DFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>